{% stylesheet %}
.graphic-block {
    display: flex;
    margin: 0 auto;
}

.graphic-block .graphic-image {
    flex: 1;
    flex-shrink: 0;
}

.graphic-block .graphic-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: top;
}

.graphic-block .graphic-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    padding: 30px;
    color: #333;
    overflow: hidden;
}

.graphic-block .graphic-content .graphic-content-title {
    max-width: 560px;

}

.graphic-block .graphic-content .graphic-content-des {
    width:100%;
    margin-top: 20px;
    line-height: 1.5;
    color: var(--detail_color);
}
.graphic-block .graphic-content .graphic-content-des p {
    width:100%;
    overflow: hidden;
}

.graphic-block .graphic-content-left {
    align-items: flex-start;
    text-align: left;
}

.graphic-block .graphic-content-center {
    align-items: center;
    text-align: center;
}

.graphic-block .graphic-content-right {
    align-items: flex-end;
    text-align: right;

}
.graphic-block.graphic-block-right {
    flex-direction: row-reverse;

}
.graphic-block.graphic-block-right .move_padding{
    padding-left: 0;
}

.graphic-block.image-fill {
    width: 100%;
    max-width: 100%;
}
@media screen and (max-width: 767px) {
    .graphic-block.graphic-block-right,
    .graphic-block{
        flex-direction: column;
        padding: 0 15px;
    }
    .graphic-block .graphic-content{
        padding: 15px;
    }
}
{% endstylesheet %}

<div class="graphic-block graphic-block-{{ section.settings.image_position }} {% if section.settings.is_wdith_fill %}full_container_wrapper{% else %}container_wrapper{% endif %}"> 
  <a href="{% if section.settings.link.url %}{{ section.settings.link.url | append: '?data_from=' | append: data_from }}{% else %}javascript:;{%endif%}" class="graphic-image">
    {% if section.settings.image.src %}
    <img data-src="{{ section.settings.image.src }}" src="{{ 'empty.png' | public_asset_abs_url }}"   alt="{{ section.settings.image.alt }}">
    {% else %}
    {% include default_block , {width:'100%',height:"100%",min_height:"240px"} %}
    {% endif %}
  </a>

  <div class="graphic-content graphic-content-{{ section.settings.text_position }} {% if section.settings.bg_color == "" %}move_padding{% endif %}" style="background: {{ section.settings.bg_color }}">
    <div class="graphic-content-title general_title-color" style="color: {{ section.settings.title_color }}">{{ section.settings.title }}</div>
    <div class="graphic-content-des" style="color: {{ section.settings.content_color }}">{{ section.settings.content }}</div>
    {% if section.settings.button_title != "" %}
    <a href="{% if section.settings.button_link.url %}{{ section.settings.button_link.url | append: '?data_from=' | append: data_from }}{% else %}javascript:;{%endif%}" class="graphic-content-btn main_btn">{{ section.settings.button_title }}</a>
    {% endif %}
  </div>
</div>
{% schema %}
{
  "tag": "",
  "class": "block_image_text",
  "is_global": false,
  "name": {
    "zh_CN": "图文"
  },
  "max_blocks": "0",
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "图片"
      }
    },
    {
      "type": "card_image",
      "label": {
        "zh_CN": "选择图片"
      },
      "default": {
        "src": "",
        "alt": ""
      },
      "info": {
        "zh_CN": "常用比例4:3、3:2、2:1、1:1，宽度1000px以上,高度可自适应"
      },
      "id": "image"
    },
    {
      "type": "card_select",
      "label": {
        "zh_CN": "pc图片位置"
      },
      "id": "image_position",
      "option": [
        {
          "label": {
            "zh_CN": "左图右文"
          },
          "value": "left"
        },
        {
          "label": {
            "zh_CN": "右图左文"
          },
          "value": "right"
        }
      ],
      "default": "right"
    },
    {
      "type": "card_select",
      "label": {
        "zh_CN": "文字对齐方式"
      },
      "id": "text_position",
      "option": [
        {
          "label": {
            "zh_CN": "左对齐"
          },
          "value": "left"
        },
        {
          "label": {
            "zh_CN": "居中"
          },
          "value": "center"
        },
        {
          "label": {
            "zh_CN": "右对齐"
          },
          "value": "right"
        }
      ],
      "default": "left"
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "宽度铺满"
      },
      "id": "is_wdith_fill",
      "default": "0"
    },
    {
      "type": "card_header",
      "label": {
        "zh_CN": "内容"
      }
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "标题"
      },
      "id": "title",
      "default": "Heading"
    },
    {
      "type": "card_text_editor",
      "label": {
        "zh_CN": "内容"
      },
      "id": "content",
      "default": "Use this text to share information about your brand with your customers. Describe a product,share announcements,or welcome customers to your store."
    },
    {
      "type": "card_color",
      "label": {
        "zh_CN": "标题颜色"
      },
      "id": "title_color",
      "default": "#1D1F21"
    },
    {
      "type": "card_color",
      "label": {
        "zh_CN": "内容颜色"
      },
      "id": "content_color",
      "default": "#987273"
    },
      {
      "type": "card_color",
      "label": {
        "zh_CN": "内容背景"
      },
       "id":"bg_color",
       "default": "#fff"
    },
    {
      "type": "card_header",
      "label": {
        "zh_CN": "按钮"
      }
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "按钮标题"
      },
      "id": "button_title",
      "default": "more"
    },
    {
      "type": "card_page_link",
      "label": {
        "zh_CN": "按钮链接"
      },
      "default": {
        "type": "",
        "title": "",
        "url": ""
      },
      "id": "button_link"
    }
  ],
  "blocks": [],
  "default": {
    "settings": {
      "image": {
        "src": "",
        "alt": ""
      },
      "image_position": "left",
      "text_position": "left",
      "title": "About Us",
      "content": "Share information about your brand with your customers. Describe a product, make announcements, or welcome customers to your store.",
      "title_color": "#1D1F21",
      "content_color": "#666",
      "bg_color":"",
      "is_wdith_fill":false,
      "button_title": "LEARN MORE",
      "button_link": {
        "type": "",
        "title": "",
        "url": ""
      }
    },
    "blocks": []
  }
}
{% endschema %}